﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>天地图示例</title>
    <link href="JS/ol3/ol.css" rel="stylesheet" />
    <script src="JS/ol3/ol-debug.js"></script>
    
</head>
<body >
<div id="map">
    <div id="measure" class="measuretooltip tooltip-measure"></div>
    <div id="measurehelp" class="measuretooltip"></div>
    <div id="wrapper"  >
        <div id="location"></div>
        <div id="scale"></div>
    </div>
</div>
    <script type="text/javascript">
        function init() {
            var projection3857 = new ol.proj.get("EPSG:3857");
            var projection3857Extent = projection3857.getExtent();
            var mapWidth3857 = ol.extent.getWidth(projection3857.getExtent());

            var resolutions3857 =
                [
                    //78271.51696402048,
                    //39135.75848201024,
                    19567.87924100512,
                    9783.93962050256,
                    //4891.96981025128,
                    //2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974
                ]

            var mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                projection: 'EPSG:4326',
                className: 'custom-mouse-position',
                target: document.getElementById('location'),
                undefinedHTML: '&nbsp;'
            });
            var scaleLineControl = new ol.control.ScaleLine({
                target: document.getElementById('scale')
            });



            //高德地图完全遵守WMTS规则;
            var tileGrid = new ol.tilegrid.TileGrid({
                resolutions: resolutions3857,
                tileSize: [256, 256],
                extent: projection3857Extent,
                origin: ol.extent.getTopLeft(projection3857Extent), //Origin左上角
            });


            var map = new ol.Map({
                view: new ol.View({
                    center: [12959773, 4853101],
                    zoom: 12
                }),
                controls: [
                    scaleLineControl,
                    mousePositionControl,
                    new ol.control.FullScreen({ tipLabel: '全屏' })],
                layers: [
                     //天地图
                    new ol.layer.Tile({
                        source : new ol.source.TileImage({
                            tileUrlFunction: function (tileCoord) {
                                var z = tileCoord[0]+2;
                                var x = tileCoord[1];
                                var y = Math.abs(tileCoord[2]);
                                return "testtiles/tianditu_raster/" + z + "/" + x + "/" + y + ".png";   //离线瓦片路径
                            },
                            tileGrid: tileGrid,
                            projection: projection3857,
                        })
                    }),
                ],
                target: "map"
            });

            map.getView().setZoom(0);
        }

        console.log(1);
        init();
    </script>

</body>


</html>